<template>
  <div class="app-container">
    <!-- <pre>detail:{{detail}}</pre> -->
    <!-- <pre>moduleData2:{{moduleData2}}</pre> -->
    <!-- <pre>detail.ActionList：{{detail.ActionList}}</pre> -->
    <el-button type="primary" style="margin-bottom:20px"  @click="goback">返回</el-button>

    <el-form :model="detail" ref="form" label-width="120px">
      <el-form-item label="角色名称">
        <el-input v-model="detail.RoleName"></el-input>
      </el-form-item>
       <el-form-item label="排序">
        <el-input v-model="detail.Sort"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
      <el-form-item label="功能清单">
        <el-tree
          ref="tree"
          :data="moduleData2"
          show-checkbox
          node-key="id"
          :default-expanded-keys="['61f19504-17b8-4343-9a17-5b197473a3d6']"
          :default-checked-keys="detail.ActionList"
          @check="checkChange"
          style="margin-top:8px;"
          >
        </el-tree>
        
        <!-- <el-checkbox-group v-model="detail.ActionList">
          <ul v-for="item1 in moduleData" :key="item1.ID">
            <li style="list-style-type:none;">
                <span style="font-size:14px;">{{ item1.ModuleName }}</span>
                <ul style="list-style-type:none;font-size:14px;" v-if="item1.ChildModuleList&&item1.ChildModuleList.length>0">
                  <li v-for="item2 in item1.ChildModuleList" :key="item2.ID">
                    <span style="margin-right:10px;">{{item2.ModuleName}}</span>
                    <el-checkbox v-for="check in item2.ActionList" :key="check.ID" :label="check.ID">{{ check.Name }}</el-checkbox>
                  </li>
                </ul>
            </li>
          </ul>
        </el-checkbox-group> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getDetail, edit, create, getActionAll } from '@/api/role'
import { setToken } from '@/utils/auth'
import moduletree from '@/components/ModuleTree'
export default {
  components: {
    moduletree
  },
  data() {
    return {
      detail: {
        ID: '',
        RoleName: '',
        Sort: '',
        Remark: '',
        ActionList: []
      },
      moduleData: [],
      moduleData2:[]
    }
  },
  created() {
    this.loadData()
  },
  mounted() {

  },
  methods: {
    goback(){
      this.$router.go(-1);
    },
    loadData() {
      if (this.$route.query.id != null) {
        getDetail(this.$route.query.id).then(response => {
          this.detail = response.Entity
          this.$refs.tree.setCheckedKeys(this.detail.ActionList);

          if (response.Entity == null) {
            this.$message({
              message: '获取角色信息失败,请重试!',
              type: 'success'
            });
            this.$router.push({ name: 'Role' })
          }
        })
      }
      getActionAll().then(response => {
        this.moduleData = response.Entity
        this.moduleData2 = [];
        this.moduleData.map(item=>{
          var obj = {};
          obj.label = item.ModuleName;
          obj.id = item.ID;
          obj.children = [];
          if(item.ChildModuleList&&item.ChildModuleList.length>0){
            item.ChildModuleList.forEach(arg=>{
              var obj1 = {}
              obj1.id = arg.ID;
              obj1.label = arg.ModuleName;
              obj1.children = [];
              if(arg.ActionList&&arg.ActionList.length>0){
                arg.ActionList.forEach(arg1=>{
                  var obj2 = {}
                  obj2.id = arg1.ID;
                  obj2.label = arg1.Name;
                  obj1.children.push(obj2);
                })
              }
              obj.children.push(obj1);
            })
          }else if(item.ActionList&&item.ActionList.length>0){
            item.ActionList.forEach(arg=>{
              var obj1 = {}
              obj1.id = arg.ID;
              obj1.label = arg.Name;
              obj1.children = [];
              // if(arg.ActionList&&arg.ActionList.length>0){
              //   arg.ActionList.forEach(arg1=>{
              //     var obj2 = {}
              //     obj2.id = arg1.ID;
              //     obj2.label = arg1.Name;
              //     obj1.children.push(obj2);
              //   })
              // }
              obj.children.push(obj1);
            })
          }
          this.moduleData2.push(obj);
        })
      })
    },
    checkChange(checkedNodes, checkedKeys, halfCheckedNodes,halfCheckedKeys ){
      this.detail.ActionList = checkedKeys.checkedKeys;
    },
    onSubmit() {
      if (this.$route.query.id != null) {
        edit(this.detail).then(response => {
          if (response.StatusCode === 0) {
            if (response.Entity != null) {
              setToken(response.Entity)
            }
            this.$message({
              message: '编辑角色信息成功!',
              type: 'success'
            });
            this.$router.push({ name: 'Role' })
          } else {
            alert(response.Message)
          }
        })
      } else {
        create(this.detail).then(response => {
          if (response.StatusCode === 0) {
            this.$message({
              message: '角色创建成功!',
              type: 'success'
            });
            this.$router.push({ name: 'Role' })
          } else {
            this.$message({
              message: response.Message,
              type: 'error'
            });
          }
        })
      }
    }
  }
}

</script>